<template>
	<public-view navType="rechangeMoney" navTitle="提现">
		<view class="content">
			<view class="tixian-boxa flex f-d-c">
				<view class="top flex a-i-c w-100 j-c-b">
					<view class="left flex a-i-c">
						<view class="title f-w-b">
							提现金额
						</view>
						<view class="f-s-24" style="color:#535353;" v-if="source_type === 'distributor'">
							可提现余额￥{{page_data.balance_kickback||0}}
						</view>
					</view>
					<view class="right color-2567F3 f-s-24 f-w-b" @click="changeMoney">
						全部提现
					</view>
				</view>
				<view class="flex a-i-c">
					<view class="f-s-40 l-h-56" style="color: #E86464;">
						￥
					</view>
					<input class="f-s-24" type="digit" v-model="money" placeholder="请输入提现金额" placeholder-style="color:#d0d0d0;"/>
				</view>
			</view>
			<bottom-btn btnIndex="2" :positon="false" @click="showCardChoose">提现</bottom-btn>
			<uni-popup type="bottom" ref="cardList">
				<view class="card-list-view flex f-d-c a-i-c">
					<view class="top-add-card w-100 flex a-i-c j-c-b">
						<view class="left f-s-28 flex a-i-c">
							<image class="card-icon" src="@/static/images/card-icon.svg" mode=""></image>
							银行卡选择
						</view>
						<view class="right color-2567F3 f-s-24 all-center" @click="goTo({url:'/pages/my/addYinhangCard'})">
							<text class="f-s-30">+</text>添加
						</view>
					</view>
					<scroll-view scroll-y="true" class="card-scroll-view" @scrolltolower="scrolltolower">
						<view class="flex f-d-c w-100">
							<block v-for="(item, index) in list" :key="index">
								<view class="item flex a-i-c" @click="chooseCarBank(item)">
									<view class="radio all-center" :class="card_id === item.id?'active':'unactive'">
										<image class="duigou" v-if="card_id === item.id" src="@/static/images/duigou.svg" mode=""></image>
									</view>
									<view class="card-name flex a-i-c">
										<view class="name margin-r">
											{{item.open_bank || ""}}
										</view>
										<view class="card-number" style="color: #040404;">
											{{item.bank_card_number}}
										</view>
									</view>
									<image class="eyex-icon" src="@/static/images/eyes-d.svg" mode=""></image>
								</view>
							</block>
						</view>
					</scroll-view>
					<view class="bottom-btn-box flex a-i-c f-s-30">
						<view class="item all-center btn1" @click="close(false)">
							取消
						</view>
						<view class="item all-center btn2" @click="close(true)">
							确定
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</public-view>
</template>

<script>
	import bottomBtn from "@/components/myComponents/bottomBtn.vue"
	import {goTo} from "@/nav.js"
	export default {
		components:{
			"bottom-btn":bottomBtn
		},
		data() {
			return {
				source_type:"distributor",
				page_data:{
					balance_kickback:'0.00'
				},
				money:"",
				list:[],
				page:1,
				card_id:''
			};
		},
		onLoad(o) {
			// this.source_type = o.type
			// if(this.source_type === 'user'){
				// this.money = this.$store.getters.userInfo.balance_kickback
			// 	this.money = this.page_data.total_withdraw
			// }else{
			// 	this.page_data = JSON.parse(this.$store.state.join_page_json)
			// 	this.money = this.page_data.money
			// }
			// console.log(this.page_data)
		},
		onShow() {
			this.getMyBankCard()
			this.getShareIndex()
		},
		methods:{
			goTo,
			getShareIndex() {
				let that = this
				this.util.postRequest({
					url:"v1/distributor/index"
				}).then(res => {
					that.page_data = res.data
				})
			},
			chooseCarBank(item){
				this.card_id = item.id
			},
			changeMoney(){
				// if(this.source_type === 'user'){
				// 	this.money = this.page_data.total_withdraw
				// }else{
				// 	this.money = this.page_data.money
				// }
				this.money = this.page_data.balance_kickback
				this.showCardChoose()
			},
			postMoney(){
				let that = this
				if (that.card_id === "") {
					uni.showToast({
						title:"请选择银行卡",
						icon:"none"
					})
					return;
				}
				if (that.money === "") {
					uni.showToast({
						title:"请输入金额",
						icon:"none"
					})
					return;
				}
				if(!!!Number(that.money)||Number(that.money)<=0){
					uni.showToast({
						title:"输入金额不正确",
						icon:"none"
					})
					return
				}
				
				that.util.postRequest({
					url:"v1/public_/withdraw",
					data:{
						source_type:that.source_type,
						source_id:that.page_data.id,
						amount:that.money,
						target_data:that.card_id
					}
				}).then(res=>{
					this.$refs.cardList.close()
					this.getShareIndex()
					this.money = this.page_data.balance_kickback
				}).catch(e=>{
					uni.showToast({
						title:e.msg||"请求失败",
						icon:"none"
					})
				})
			},
			close(isEnder){
				if(isEnder){
					this.postMoney()
				}else{
					this.$refs.cardList.close()
				}
			},
			showCardNum(num){
				let str = ""
				str = num.slice(num.length-4)
				return str
			},
			scrolltolower(){
				this.page++
				this.getMyBankCard()
			},
			getMyBankCard(){
				let that = this
				that.util.getRequest({
					url:"v1/user_bank_card/index",
					data:{
						page:that.page,
						row:10
					}
				}).then(res=>{
					console.log(res)
					if(that.page === 1){
						that.list = res.data.data || []
					}else{
						if(res.data.data.length>0){
							that.list = that.list.concat(res.data.data)
						}else{
							that.page--
						}
					}
				})
			},
			showCardChoose(){
				this.$refs.cardList.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-btn-box{
		margin-top: 30upx;
		.item{
			width: 272upx;
			height: 96upx;
			border-radius: 128upx;
		}
		.btn1{
			border: 2upx solid #979797;
			color: #979797;
			margin-right: 10upx;
		}
		.btn2{
			background: #2567F3;
			color: #FFFFFF;
		}
	}
	.card-list-view{
		width: 750upx;
		background: #FFFFFF;
		border-radius: 40upx 40upx 0px 0px;
		height: 680upx;
		padding: 34upx 24upx;
		.card-scroll-view{
			width: 100%;
			height: 312upx;
			.item{
				width: 100%;
				padding: 32upx 24upx;
				.eyex-icon{
					width: 36upx;
					height: 32upx;
				}
				.card-name{
					width: 496upx;
					margin-right: 38upx;
					.margin-r{
						margin-right: 20upx;
					}
					.name{
						line-height: 40upx;
					}
				}
				.active{
					background: #2567F3;
					
				}
				.unactive{
					border: 2upx solid #9F9F9F;
				}
				.radio{
					margin-right: 26upx;
					border-radius: 50%;
					width: 40upx;
					height: 40upx;
					.duigou{
						width: 24upx;
						height: 16upx;
					}
				}
			}
		}
		.top-add-card{
			padding: 32upx 22upx;
			.left{
				.card-icon{
					width: 52upx;
					height: 48upx;
					margin-right: 22upx;
				}
			}
			.right{
				width: 120upx;
				height: 48upx;
			}
		}
	}
	.l-h-56{
		line-height: 56upx;
		margin-right: 8upx;
	}
	.tixian-boxa{
		width: 100%;
		padding: 32upx 40upx;
		background: #FFFFFF;
		border-radius: 20upx;
		margin-bottom: 64upx;
		.bottom{
			
		}
		.top{
			margin-bottom: 20upx;
			.left{
				.title{
					color: #494949;
					line-height: 44upx;
					margin-right: 24upx;
				}
			}
		}
	}
	.content{
		width: 750upx;
		padding: 42upx 24upx;
		
	}
</style>
